<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--
  <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">-->
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./build/css/index.min.css">
  <title>音频播放器</title>

</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="text-left text-success title">HTML5音乐播放器</div>
      </div>
      <div class="col-md-8">
        <div class="btn_group">
          <button class="btn btn-primary">列表功能1</button>
          <button class="btn btn-success">列表功能2</button>
          <button class="btn btn-info">列表功能3</button>
          <button class="btn btn-warning">列表功能4</button>
          <button class="btn btn-danger">列表功能5</button>
        </div>
        <div class="list">
          <div class="list_title row">
            <div class="col-sm-1"><input type="checkbox" name="" id=""></div>
            <div class="col-sm-7">歌曲</div>
            <div class="col-sm-2">歌手</div>
            <div class="col-sm-2">时长</div>
          </div>
          <div class="list_item row">
            <div class="col-sm-1"><input type="checkbox" name="" id=""></div>
            <div class="col-sm-7">
              <span class="song_number">1</span>
              <span class="song_title">成都</span>
              <span class="share glyphicon glyphicon-share"></span>
              <span class="delete glyphicon glyphicon-trash"></span>
              <span class="play glyphicon glyphicon-play-circle"></span>
            </div>
            <div class="col-sm-2">
              <span class="song_singer">赵雷</span>
            </div>
            <div class="col-sm-2">
              <span class="time">
                    <span class="song_time">5:28</span>
              </span>
            </div>
          </div>
          <div class="list_item active row">
            <div class="col-sm-1"><input type="checkbox" name="" id=""></div>
            <div class="col-sm-7">
              <span class="song_number">2</span>
              <span class="song_title">独自去偷欢</span>
              <span class="share glyphicon glyphicon-share"></span>
              <span class="delete glyphicon glyphicon-trash"></span>
              <span class="play glyphicon glyphicon-play-circle"></span>
            </div>
            <div class="col-sm-2">
              <span class="song_singer">刘德华</span>
            </div>
            <div class="col-sm-2">
              <span class="song_time">4:45</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">歌曲详情</h3>
          </div>
          <div class="panel-body" style="height: 330px;">
            <p>歌曲名:独自去偷欢</p>
            <p>歌手名:刘德华</p>
            <p>专辑名:真我的风采</p>
            <div class="lyric" style="margin-top:32px;height: 175px;overflow: auto;text-align: center;">
              <p>未去管 谁不满</p>
              <p>习惯自己的事由我管</p>
              <p>若你走 才不管</p>
              <p>自我空间不要你伴</p>
              <p>在我内心中我反我叛 不用你管</p>
              <p>放任赶走我的不满 不用你管</p>
              <p>我用不羁杀死困闷 不用你管</p>
              <p>快乐心中常为我伴</p>
              <p>独自去偷欢 我谢绝你监管</p>
              <p>道别你身边 我寂寞找个伴</p>
              <p>独自去偷欢 我未习惯这般</p>
              <p>道别你身边 我但未敢放宽</p>
              <p>未去管 谁不满</p>
              <p>习惯自己的事由我管</p>
              <p>若你走 才不管</p>
              <p>自我空间不要你伴</p>
              <p>在我内心中我反我叛 不用你管</p>
              <p>放任赶走我的不满 不用你管</p>
              <p>我用不羁杀死困闷 不用你管</p>
              <p>快乐心中常为我伴</p>
              <p>独自去偷欢 我谢绝你监管</p>
              <p>道别你身边 我寂寞找个伴</p>
              <p>独自去偷欢 我未习惯这般</p>
              <p>道别你身边 我但未敢放宽</p>
              <p>独自去偷欢 我谢绝你监管</p>
              <p>道别你身边 我寂寞找个伴</p>
              <p>独自去偷欢 我未习惯这般</p>
              <p>道别你身边 我但未敢放宽</p>
              <p>在我内心中我反我叛 不用你管</p>
              <p>放任赶走我的不满 不用你管</p>
              <p>我用不羁杀死困闷 不用你管</p>
              <p>快乐心中常为我伴</p>
              <p>独自去偷欢 我谢绝你监管</p>
              <p>道别你身边 我寂寞找个伴</p>
              <p>独自去偷欢 我未习惯这般</p>
              <p>道别你身边 我但未敢放宽</p>
              <p>独自去偷欢 我谢绝你监管</p>
              <p>道别你身边 我寂寞找个伴 </p>
              <p>独自去偷欢 我未习惯这般</p>
              <p>道别你身边 我但未敢放宽</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="player">
    <div class="player_control">
      <span class="glyphicon glyphicon-step-backward"></span>
      <span id="btn-back" class="glyphicon glyphicon-backward"></span>
      <span id="btn-play" class="glyphicon glyphicon-play"></span>
      <span id="btn-pause" style="display:none" class="glyphicon glyphicon-pause"></span>
      <span id="btn-forward" class="glyphicon glyphicon-forward"></span>
      <span class="glyphicon glyphicon-step-forward"></span>
    </div>

    <div class="player_music">
      <div class="player_music_info" id="sim_song_info">
        <a href="" title="title" class="js_song" target="_blank">独自去偷欢</a> /
        <a href="" title="莫西子诗" class="js_singer" target="_blank">刘德华</a>
        <div class="player_music_time" id="time_show">03:07 / 03:32</div>
      </div>
      <div class="player_progress" id="progress">
        <div class="player_progress_inner" id="spanplayer_bgbar" title="">
          <div class="player_progress_load" id="downloadbar"></div>
          <div class="player_progress_play" id="spanplaybar">
            <i class="player_progress_dot" id="spanprogress_op"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="player_voice">
      <span class="glyphicon glyphicon-heart"></span>
      <span class="glyphicon glyphicon-save"></span>
      <span id="btn-slient" class="glyphicon glyphicon-volume-off"></span>
      <span class="glyphicon glyphicon-volume-up"></span>
      <div class="player_voice_control">
        <div class="player_progress" id="voice">
          <div class="player_progress_inner" id="spanvolume" title="">
            <div class="player_progress_play" id="spanvolumebar">
              <i class="player_progress_dot" id="spanvolumeop"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- <span class="glyphicon glyphicon-volume-up"></span> -->
    </div>
  </div>

  <audio controls id="myAudio">
      <!-- <source src="./build/libs/chengdu.mp3" type="audio/mpeg"> -->
      <source src="http://other.web.ra01.sycdn.kuwo.cn/resource/n3/192/19/57/297064714.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
    </audio>

  <div class="hide">
    <button>播放</button>
    <button>暂停</button>
    <button id="btn-volumn">音量</button>
    <button id="btn-volumn-add">音量+</button>
    <button id="btn-volumn-reduce">音量-</button>
    <button>前进10s</button>
    <button>后退10s</button>
    <button id="btn-info">更多信息</button>

    <input id="range" type="range" min="0" max="1" step="0.01" value="0.6" />
    <div class="fa fa-rocket"></div>
  </div>

  <!--<script src="./node_modules/jquery/dist/jquery.js"></script>-->
  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script src="./build/js/index.min.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      document.addEventListener("touchstart", function() {
        window.myAudio.play()
      })
      if(window.myAudio.paused){
        window.myAudio.play()
      }
    }
  </script>
</body>

</html>
